<!--
 * @description  :涉烟人详情
 * @descriptionDetail:涉烟人详情
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-10-09 22:21:21
-->
<template>
  <view :class="!isCom() ? 'page' : ''">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :title="navTitle" v-if="!isCom()"></theme-navbar>
    <!-- #endif -->
    <view class="content content-bg ifn-content" style="background-color: white; margin-left='10rpx'">
      <u-form
        class="u-form-m"
        :label-style="labelStyle"
        :model="baseInfo"
        :error-type="['border-bottom', 'message',]"
        label-width="auto"
        label-position="top"
        ref="uForm"
      >
        <u-form-item label="登记单位">
          <u-input
            v-model="baseInfo.orgName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="姓名">
          <u-input
            v-model="baseInfo.name"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="民族">
          <u-input
            v-model="baseInfo.nationName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="绰号">
          <u-input
            v-model="baseInfo.nickname"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="证件类型">
          <u-input
            v-model="baseInfo.idCardTypeName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="证件号码">
          <u-input
            v-model="baseInfo.idCard"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="文化程度">
          <u-input
            v-model="baseInfo.educationName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="出生日期">
          <u-input
            v-model="baseInfo.birthday"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="性别">
          <u-input
            v-model="baseInfo.sexName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="身份证地址">
          <u-input
            v-model="baseInfo.idCardAddress"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="身高(cm)">
          <u-input
            v-model="baseInfo.height"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item prop="placeGis" label="工作单位">
          <u-input
            v-model="baseInfo.company"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="手机号码">
          <u-input
            v-model="baseInfo.phone"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="现住址">
          <u-input
            v-model="baseInfo.realAddress"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="职业">
          <u-input
            v-model="baseInfo.duty"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="婚姻状态">
          <u-input
            v-model="baseInfo.maritalStatusName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="微信号">
          <u-input
            v-model="baseInfo.wechatAccount"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="QQ号">
          <u-input
            v-model="baseInfo.qqNo"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="支付宝">
          <u-input
            v-model="baseInfo.alipayAccount"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="邮箱">
          <u-input
            v-model="baseInfo.email"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="零售许可证">
          <u-input
            v-model="baseInfo.licNo"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="涉烟角色">
          <u-input
            v-model="baseInfo.caseRoleName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="籍贯">
          <u-input
            v-model="baseInfo.personProvCityCountyName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="详细地址">
          <u-input
            v-model="baseInfo.nativeAddress"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="备注">
          <u-input
            v-model="baseInfo.remark"
            :disabled="true"
            type="textarea"
            placeholder=""
          >
          </u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="content u-page">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.images" :customStyle="customStyle"></fsection>
      <view class="u-form-m pl-10">
        <m-upload
          maxCount="99"
          :file-list="imgList"
          :disabled="true"
          :deletable="false"
          upApiUrl="uploadBase64File"
          :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.k_person_attr}"
        >
        </m-upload>
        <u-image
          width="100%"
          v-if="!imgList.length"
          height="330rpx"
          style="padding:0 0 34rpx 14rpx"
          mode="scaleToFill"
          :src="'/static/certificate/noImg.png'"
        >
        </u-image>
      </view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.connectLic" :customStyle="customStyle"></fsection>
      <list-view
        :i="2"
        :index="2"
        :load-data="loadLic"
        :init-load="false"
        height="261px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="specailListview"
      >
        <template slot-scope="d">
          <lic-connection :connection="d.data" class="case-sty"></lic-connection>
        </template>
      </list-view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.connect" :customStyle="customStyle"></fsection>
      <list-view
        :i="0"
        :index="0"
        :load-data="loadCase"
        :init-load="false"
        height="300px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="specailListview"
      >
        <template slot-scope="d">
          <caseConnection :connection="d.data" class="case-sty"></caseConnection>
        </template>
      </list-view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.connectCar" :customStyle="customStyle"></fsection>
      <list-view
        :i="1"
        :index="1"
        :load-data="loadCar"
        :init-load="false"
        height="300px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="specailListview"
      >
        <template slot-scope="d">
          <car-connection :connection="d.data" class="case-sty"></car-connection>
        </template>
      </list-view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.connectPerson" :customStyle="customStyle"></fsection>
      <list-view
        :i="3"
        :index="3"
        :load-data="loadPerson"
        :init-load="false"
        height="200px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="specailListview"
      >
        <template slot-scope="d">
          <person-connection :connection="d.data" class="case-sty"></person-connection>
        </template>
      </list-view>
    </view>
  </view>
</template>

<script>
import fsection from "@/components/form-section.vue";
import MUpload from "@/components/m-upload.vue";
import caseConnection from '../components/caseConnection.vue';
import listView from '@/components/list_view.vue';
import intelligenceservice from "@/service/intelligence/intelligence.service";
import certificateService from "@/service/certificate/certificate.service.js";
import carConnection from '../components/carConnection.vue';
import licConnection from '../components/licConnection.vue';
import personConnection from '../components/personConnection.vue';
export default {
  components: {
    fsection,
    MUpload,
    caseConnection,
    listView,
    carConnection,
    licConnection,
    personConnection,
  },
  props:{
    record:{
      type:Object,
      default:() => { return undefined; },
    },
  },
  data() {
    return {
      customStyle:{
        padding:"20rpx 32rpx",
      },
      baseInfo: {
      },
      labelStyle: {
        fontWeight: 400,
        color: this.$theme.u_main_color,
        fontSize: '.75rem',
      },
      iconstlye: {
        'fontSize': '40rpx',
        'color': this.$theme.u_type_primary,
      },
      title:{
        images:"图片信息",
        tag:"标签信息",
        connect:"案件信息",
        connectCar:'车辆信息',
        connectLic:'证件信息',
        connectPerson:'人员信息',
        connectMsg:"涉案人员详情",

      },
      imgList:[],
      tagmsg:[],
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);

  },
  watch: {
    record:{
      handler(newVal,oldVal){
        if(!newVal) return;
        this.loadData();
        this.initAuditImage();
      },
      immediate: false,
      deep: true,
    },
  },
  created(){
    this.loadData();
  },
  mounted(){
    this.initAuditImage();
  },
  methods: {
    getListViewTop(){
      this.$u.getRect('.case-search-lay').then(res => {
        this.listViewTop = (this.$u.sys().statusBarHeight + res.top + res.height) + 'px';
      });
      this.$u.getRect('.submit-btns').then(res => {
        this.bottomOffset = (this.$u.sys().screenHeight - res.top) + "px";
      });
    },
    loadLic(page){
      return new Promise((resolve,reject) => {
        let params = {
          page:page.num,
          limit:page.size,
          paras:{
            archiveUuid:this.baseInfo.uniqueKey,
            type: "person-lic",
          },
        }
        intelligenceservice.archiveLicList(params).then(res => {
          if(res.success){
            resolve({ data: {list: res.data, totalCount : res.count,},});
          }else{
            this.$modal.alert(res.msg);
            resolve({ data: {list: [], totalCount : 0,},});
          }
        }).catch(e => {
          this.$u.toast('请求失败:' + e);
          resolve({
            count: 0,
            data:[],
          });
        });
      })
    },
    loadCase(page){
      return new Promise((resolve,reject) => {
        let params = {
          page:page.num,
          limit:page.size,
          paras:{
            archiveUuid:this.baseInfo.uniqueKey,
            type: "person-case",
          },
        }
        intelligenceservice.archiveCaseList(params).then(res => {
          if(res.success){
            resolve({ data: {list: res.data, totalCount : res.count,},});
          }else{
            this.$modal.alert(res.msg);
            resolve({ data: {list: [], totalCount : 0,},});
          }
        }).catch(e => {
          this.$u.toast('请求失败:' + e);
          resolve({
            count: 0,
            data:[],
          });
        });
      })
    },
    loadCar(page){
      return new Promise((resolve,reject) => {
        let params = {
          page:page.num,
          limit:page.size,
          paras:{
            archiveUuid:this.baseInfo.uniqueKey,
            type: "person-car",
          },
        }
        intelligenceservice.archiveCarList(params).then(res => {
          if(res.success){
            resolve({ data: {list: res.data, totalCount : res.count,},});
          }else{
            this.$modal.alert(res.msg);
            resolve({ data: {list: [], totalCount : 0,},});
          }
        }).catch(e => {
          this.$u.toast('请求失败:' + e);
          resolve({
            count: 0,
            data:[],
          });
        });
      })
    },
    loadPerson(page){
      return new Promise((resolve,reject) => {
        let params = {
          page:page.num,
          limit:page.size,
          paras:{
            archiveUuid:this.baseInfo.uniqueKey,
            type: "person-family",
          },
        }
        intelligenceservice.archiveFamilyList(params).then(res => {
          if(res.success){
            resolve({ data: {list: res.data, totalCount : res.count,},});
          }else{
            this.$modal.alert(res.msg);
            resolve({ data: {list: [], totalCount : 0,},});
          }
        }).catch(e => {
          this.$u.toast('请求失败:' + e);
          resolve({
            count: 0,
            data:[],
          });
        });
      })
    },
    initAuditImage(){
      certificateService.goFiles(this.baseInfo.uuid,this.$FILE_GROUP_TYPE.k_person_attr).then(res => {
        if(res.success) this.imgList = res.data;
      }).catch(e => {
        console.log(e);
      })
    },
    loadData(){
      if(this.record){
        this.baseInfo = this.record;
      }else{
        this.baseInfo = this.getRouteParam();
      }
      if(this.$u.test.isEmpty(this.baseInfo.nativeCityCodeName)){
        this.baseInfo.personProvCityCountyName = ""
      }else{
        this.baseInfo.personProvCityCountyName = this.baseInfo.nativeProvCodeName   + this.baseInfo.nativeCityCodeName  + this.baseInfo.nativeCountyCodeName;
      }
      if(this.baseInfo.isActive == 1){
        this.baseInfo.isActiveStr = "是"
      }else {
        this.baseInfo.isActiveStr = "否";
      }
    },
    // 是组件
    isCom(){
      return this.record;
    },
  },
}
</script>

<style scoped lang="scss">
@import "./add.scss";
.page{
  padding: 0;
}
.fsection{
    width: 75% !important;
}
.choice{
    position: relative;
    top:20rpx;
    float:right;
}
.tag{
   margin-right: 10rpx;
}
/deep/.mescroll-upwarp{
  min-height: 0;
  padding: 0 0;
  margin-top: -18px;
}
</style>
